import ProTable from '@ant-design/pro-table';
import React, {useState} from 'react';
import {defaultPagination, paginationTool} from '@/utils/util';
import {useMount, useRequest} from 'ahooks';
import {findByLoginList} from '@/services/ant-design-pro/login';
import {getResult} from '@/services/ant-design-pro/attribute';
import { ReloadOutlined } from '@ant-design/icons';

const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    search: false,
  },
  {
    title: '用户名称',
    dataIndex: 'userName',
  },
  {
    title: '登录IP',
    dataIndex: 'ip',
    search: false,
  },
  {
    title: '设备品牌',
    dataIndex: 'brand',
    search: false,
  },
  {
    title: '设备型号',
    dataIndex: 'model',
    search: false,
  },
  {
    title: '系统语言',
    dataIndex: 'language',
    search: false,
  },
  {
    title: '语言',
    dataIndex: 'myLanguage',
    search: false,
  },
  {
    title: '系统版本号',
    dataIndex: 'version',
    search: false,
  },
  {
    title: '版本号',
    dataIndex: 'myVersion',
    search: false,
  },
  {
    title: '发布版本',
    dataIndex: 'myEvnVersion',
    search: false,
  },
  {
    title: '系统及版本',
    dataIndex: 'systemVersion',
    search: false,
  },
  {
    title: '客户端平台',
    dataIndex: 'platform',
    hideInSearch: true,
  },
  {
    title: '登录时间',
    dataIndex: 'createDate',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateDate',
    valueType: 'dateTime',
    search: false,
  },
  {
    title: '状态',
    dataIndex: 'state',
    valueType: 'select',
    valueEnum: await getResult ( 'backsatgeloginstate' ),
  },
];

const cloneTbale = () => {
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByLoginList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByLoginList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
    fetchByLoginList ();
  } );

  return (
    <ProTable
     options={{reload:false}}



      search={false}
      onDataSourceChange={(d) => {
        console.log ( 'onDataSourceChange', d );
      }}
      onLoad={(d) => {
        // 数据加载完操作
        console.log ( 'onDataSourceChange', d );
      }}
      dataSource={dataList?.data?.list}
      loading={loading}
      pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
        setPagination ( data1 );

        fetchByLoginList ( {...data1} );
      } )}
      search={{
        defaultCollapsed: false,
        labelWidth: 'auto',
      }}
      cardBordered={true}
      columns={columns}
     toolBarRender={()=>[<ReloadOutlined onClick={()=>refresh()} />]}

    ></ProTable>
  );
};

export default cloneTbale;
